import React, { useState } from 'react'
import axios from 'axios'
import { Form , Input , Button , Col , Row ,Card} from 'antd'
import { useNavigate } from 'react-router-dom'
import { UserOutlined , LockOutlined } from '@ant-design/icons'
import './Login.scss'
export default function Login() {
    const [user,setuser] = useState('123')
    const [word,setword] = useState('123')
    
    let navigate = useNavigate()
    const clickForLogin = ()=>{
        // console.log(user,word);
        //这里暂时不登录成功 获取登录的卡密 进行请求验证  发送请求先 ,这里不使用本地数据了
        axios.post('/login',{
            username : user,
            password : word
        }).then((res)=>{
            //res.data.msg  //存储token
            if(res.data.code === 200){
                localStorage.setItem('token',res.data.msg)
                //跳转到首页
                navigate('/')
            }

        })
    }
  return (
        // 使用行和列 
    <Row align="middle" justify="center" className='loginstyle' >
        <Col>
            <Card title="登录系统" className='login-card' name="login-info">
                <Form initialValues={{
                    // 这里的默认值会自动的放到input当中
                    username : user,
                    password : word
                    }}>
                    <Form.Item label="用户名" name="username" rules={[
                        {
                            required : true,
                            message : '请输入用户名'
                        }
                    ]}>
                        <Input placeholder='请输入用户名' prefix={ <UserOutlined /> } value={user} onInput={(e)=>{
                            setuser(e.target.value)
                        }}></Input>
                    </Form.Item>
                    <Form.Item label="密码&emsp;" name="password" rules={[
                        {
                            required : true,
                            message : '请输入密码'
                        }
                    ]}>
                        <Input.Password placeholder='请输入密码' prefix={ <LockOutlined /> } value={word} onInput={(e)=>{
                            setword(e.target.value)
                        }}></Input.Password>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" block onClick={clickForLogin}>登录</Button>
                    </Form.Item>
                </Form>
            </Card>
        </Col>
    </Row> 
  )
}
